<template>
  <div class="mainContainer">
    <Header />
    <div class="content-card">
      <el-form ref="formRef" :model="form" :inline="true" label-width="100px">
        <el-form-item label="所属组织：" prop="organization">
          <treeSelect
            ref="selectTreeRef"
            :props="defaultProps"
            :options="treeData"
            :value="form.organization"
            :clearable="true"
            :accordion="true"
            @getValue="getValue($event)"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item label="关键词：" prop="message">
          <el-input
            style="width: 200px"
            placeholder="工号/姓名"
            v-model="form.message"
          ></el-input>
        </el-form-item>
        <el-form-item
          ><el-button type="primary" icon="el-icon-search"
            >搜索</el-button
          ></el-form-item
        >
        <el-form-item>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content-announcement"></div>
    <div class="content-table">
      <!-- 功能区 -->
      <tableTool />

      <!-- 数据表单 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-if="formAlive"
        v-loading="loading"
      >
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column
          prop="id"
          label="序号"
          width="100"
          sortable
        ></el-table-column>
        <el-table-column prop="teacherId" label="教师工号" width="160">
        </el-table-column>
        <el-table-column prop="teacherName" label="教师姓名" width="140">
        </el-table-column>
        <el-table-column prop="college" label="学院" width="240">
        </el-table-column>
        <el-table-column
          prop="major"
          label="专业"
          width="240"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="80" align="center">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row.teacherName, scope.row.teacherId)"
              size="mini"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="page">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          background
          layout="prev, pager, next, jumper,sizes, total"
          :total="400"
        >
        </el-pagination>
      </div>

      <!-- 查看表格对话框 -->
      <el-dialog
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
      >
        <div
          slot="title"
          class="header-title"
          style="background-color: #409eff; color: #fff"
        >
          <div style="padding: 15px 20px">详情</div>
        </div>
        <el-form :model="dialogForm">
          <el-form-item label="姓名：" label-width="120px">
            <el-input
              v-model="dialogForm.name"
              autocomplete="off"
              style="width: 360px"
              readonly="true"
            ></el-input>
            <div class="sub-title" style="color: #ccc">真实姓名</div>
          </el-form-item>
          <el-form-item label="用户编码：" label-width="120px">
            <el-input
              v-model="dialogForm.id"
              autocomplete="off"
              style="width: 360px"
              readonly="true"
            ></el-input>
            <div class="sub-title" style="color: #ccc">学号/工号</div>
          </el-form-item>
          <el-form-item label="电子签名：" label-width="120px">
            <el-button class="iconfont icon-yunshangchuan" size="medium"
              >上传图片</el-button
            >
            <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将图片拖到此处，或<em>点击上传</em>
              </div>
              <div
                class="el-upload__tip"
                slot="tip"
                style="position: absolute; top: 210px"
              >
                只能上传jpg/png文件，且不超过500kB
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Header from '@/components/MainHeader/ShuJuManage/TeacherUserInformList.vue';
import treeSelect from '@/components/Function/treeSelect.vue';
import tableTool from '@/components/Function/TableTool.vue';

export default {
  components: {
    Header,
    tableTool,
    treeSelect,
  },
  data() {
    return {
      // 信息
      form: {
        message: '',
        organization: '',
      },

      // 表格信息
      dialogForm: {
        name: '',
        id: '',
      },

      // 树状数据中，选定子元素名，展示名，选中值变量名
      defaultProps: {
        children: 'list',
        label: 'name',
        value: 'id',
      },

      // 树状数据
      treeData: [
        {
          id: '1',
          name: '佛山科学技术学院',
          list: [
            {
              id: '1-1',
              name: '电子信息工程学院',
              list: [
                { id: '1-1-1', name: '物联网工程' },
                { id: '1-1-2', name: '网络工程' },
                { id: '1-1-3', name: '计算机科学与技术' },
                { id: '1-1-4', name: '计算机科学与技术(人工智能方向)' },
                { id: '1-1-5', name: '计算机科学与技术(第二学位)' },
                { id: '1-1-6', name: '电子信息工程' },
              ],
            },
          ],
        },
      ],

      // 表格信息
      tableData: [
        {
          id: 1,
          teacherId: 'abc',
          teacherName: '张三',
          college: '电子信息工程学院',
          major: '计算机科学与技术',
        },
        {
          id: 2,
          teacherId: 'xyz',
          teacherName: '李四',
          college: '电子信息工程学院',
          major: '网络工程',
        },
        {
          id: 3,
          teacherId: 'ijk',
          teacherName: '王五',
          college: '电子信息工程学院',
          major: '计算机科学与技术',
        },
      ],

      // 显示表格
      formAlive: true,

      // 加载表格
      loading: false,

      // 不显示表格信息
      dialogFormVisible: false,
    };
  },
  methods: {
    //点击重置按钮
    resetForm() {
      this.$message({
        message: '重置成功',
        type: 'success',
        duration: 1000,
      });
      this.$refs.formRef.resetFields();
    },

    // 刷新表格
    reload() {
      this.loading = true;
      this.$nextTick(() => {
        this.formAlive = true;
        this.loading = false;
      });
    },

    // 刷新表格功能
    reloadTable() {
      this.reload();
    },

    // 查看表格信息
    handleClick(teacherName, teacherId) {
      this.dialogForm.name = teacherName;
      this.dialogForm.id = teacherId;
      this.dialogFormVisible = true;
    },
  },
  mounted() {
    this.$bus.$on('reloadTable', this.reloadTable);
  },
  beforeDestroy() {
    this.$bus.$off('reloadTable');
  },
};
</script>

<style lang="less">
.mainContainer {
  .content-card {
    position: relative;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
    top: 60px;
    margin: 0 20px 20px 20px;
    padding: 0 10px;

    label {
      font-size: 14px;
    }

    .el-form-item {
      margin: 10px;
    }
  }
}
</style>

<style lang="less" scoped>
/deep/.el-button--medium {
  font-size: 14px;

  span {
    margin-left: 5px;
  }
}

.content-table {
  ::v-deep .el-dialog__wrapper {
    // eslint-disable-line
    .el-dialog {
      .el-dialog__body {
        padding: 0px;
      }
      .el-dialog__header {
        padding: 0px;
        margin-bottom: 20px;
      }
      .el-dialog__headerbtn {
        top: 5px;
        right: 5px;
        padding-top: 10px;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
        height: 30px;
        width: 35px;
      }
      .el-dialog__headerbtn .el-dialog__close:hover {
        color: gray;
      }
    }
  }
}
</style>
